<template>
	<view class="content">
		<u-navbar :title="navTitle" :placeholder='true' height="88rpx" leftIconColor="#fff"
			titleStyle='color:#fff;font-size:32rpx' left-icon-size="32rpx" bg-color="#FF594D" :autoBack="true">
		</u-navbar>

		<view class="form">
			<u--form labelWidth="200rpx" :labelStyle="labelStyle" labelPosition="left" :model="model1" ref="uForm">
				<u-form-item label="地址" prop="userInfo.add" borderBottom @click="showAdd = true" ref="item1">
					<u--input placeholderClass="placeholderStyle" v-model="address" disabled disabledColor="#ffffff"
						placeholder="请选择上门地址" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label="门牌号" prop="userInfo.house" borderBottom ref="item1">
					<u--input placeholderClass="placeholderStyle" placeholder="详细地址，如：A座102室" v-model="addVal.detail"
						border="none"></u--input>
				</u-form-item>
				<u-form-item class="sex_content" :labelStyle="labelStyle" label="联系人" prop="userInfo.name" borderBottom
					ref="item1">
					<u--input placeholderClass="placeholderStyle" placeholder="请输入收货人姓名" v-model="addVal.consignee"
						border="none"></u--input>
					<u-radio-group activeColor="#ff594d" v-model="addVal.sex" placement="column" @change="groupChange">
						<view class="sexCheck">
							<view class="sexCheck_item">
								<u-radio name="男" @change="radioChange">
								</u-radio>
								<text>男</text>
							</view>
							<view class="sexCheck_item">
								<u-radio name="女" @change="radioChange">
								</u-radio>
								<text>女</text>
							</view>
						</view>
					</u-radio-group>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label="联系电话" prop="userInfo.tel" borderBottom ref="item1">
					<u--input placeholderClass="placeholderStyle" placeholder="1333333" v-model="addVal.phone"
						border="none"></u--input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label="设为默认地址" prop="userInfo.default" ref="item1">
					<u-checkbox-group placement="column" @change="checkboxChange">
						<u-checkbox name="1" activeColor="#ff594d" :checked="isDefault" shape="circle">
						</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
			</u--form>

			<address-picker :show="showAdd" closeOnClickOverlay @confirm='confirmAddress' @cancel='showAdd=false'
				@close='addressShow = false' :address-data="addressData" :indexs="indexs" :areaId="areaId"
				:type="type"></address-picker>
		</view>
		<view class="add_address" @click="saveAdd">
			保存地址
		</view>
	</view>
</template>

<script>
	import {
		addBook,
		updataBook,
		getBook
	} from '../../../api/book.js'
	export default {
		onLoad(option) {
			if (option.id) {
				this.addId = option.id
				this.navTitle = '地址修改'
				this.getBookData(option.id)
			}
			if (option.add == 1) {

			}
		},
		data() {
			return {
				titleStyle: {
					color: '#fff',
				},
				address: '',
				addFlag: false,
				addId: '',
				addressShow: false,
				indexs: [0, 0, 0],
				areaId: [1, 110000, 110101],
				addressData: ['北京市', '北京市', '东城区'],
				type: 3, //1-省，2-省市，3-省市区
				showAdd: false,
				model1: {
					userInfo: {
						name: '',
						add: '山东',
						house: '',
						tel: '',
						default: false
					},
				},
				actions: [{
						name: '河南',
					},
					{
						name: '北京',
					},
					{
						name: '山东',
					},
				],
				radio: '',
				switchVal: false,
				labelStyle: {
					width: '240rpx',
					'font-size': '32rpx'
				},
				isDefault: false,
				radiovalue1: '男',
				addVal: {
					userld: this.$store.getters.getUserInfo.id,
					consignee: '', // 收货人姓名
					phone: '', // 手机号
					provinceName: "", // 省级名称
					cityName: "", // 市级名称
					districtName: "", // 区级名称
					isDefault: 0, // 是否默认
					detail: '', // 详细地址
					sex: '男', // 性别
				},
				navTitle: '地址添加'
			}

		},
		methods: {
			addSelect(e) {
				// console.log(e);
				this.model1.userInfo.add = e.name
				// console.log(this.model1.userInfo);
				this.$refs.uForm.validateField('userInfo.add')
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			checkboxChange(n) {
				console.log('change', n);
				this.addVal.isDefault = n[0] ? n[0] - 0 : 0
			},
			confirmAddress(val) {
				// console.log(val);
				this.address = val.value.join('')
				this.addVal.provinceName = val.value[0]
				this.addVal.cityName = val.value[1]
				this.addVal.districtName = val.value[2]
				console.log(this.address);
				this.showAdd = false
			},
			// 添加个人地址
			async addBooks(data) {
				const res = await addBook(data)
				console.log(res);
				if (res.code != 200) {
					uni.showToast({
						icon: 'error',
						title: '保存失败'
					})
					return
				}
				uni.showToast({
					title: '保存成功',
					success() {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
			},
			// 获取地址
			async getBookData(id) {
				const res = await getBook(id)
				console.log(res);
				this.addVal = res.data
				this.address = res.data.provinceName + res.data.cityName + res.data.districtName
				this.isDefault = res.data.isDefault == 1 ? true : false
			},
			// 修改地址
			async updataBookData(data) {
				const res = await updataBook(data)
				console.log(res);
				if (res.code != 200) {
					uni.showToast({
						icon: 'error',
						title: '保存失败'
					})
					return
				}
				uni.showToast({
					title: '保存成功',
					success() {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
			},
			saveAdd() {
				if (!(this.addVal.consignee.length >= 1)) {
					uni.showToast({
						title: '请输入取件人姓名',
						icon: 'error'
					})
					return
				} else if (!(this.addVal.phone.length >= 11 && this.addVal.phone.length <= 11)) {
					uni.showToast({
						title: '请输入11位手机号码',
						icon: 'error'
					})
					return
				} else if (!(this.addVal.provinceName.length >= 1)) {
					uni.showToast({
						title: '请输入地区',
						icon: 'error'
					})
					return
				}
				if (!this.addFlag) {
					if (this.addId) {
						// console.log('修改');
						// console.log(this.addVal);
						this.updataBookData(this.addVal)
						return
					}
					// console.log('添加');
					// console.log(this.addVal);
				}
				this.addBooks(this.addVal)
				// uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		min-height: 100vh;
		padding: 32rpx 20rpx;

		.form {
			width: 710rpx;
			// height: 564rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 0rpx 20rpx;
			box-sizing: border-box;

			.placeholderStyle {
				font-size: 26rpx;
				color: #777777;
			}

			.sex_content {
				position: relative;

			}

			.sexCheck {
				position: absolute;
				right: 40rpx;
				top: 385rpx;
				display: flex;
				z-index: 111;
				flex-wrap: nowrap;

				.sexCheck_item {
					display: flex;
					flex-wrap: nowrap;
					margin-left: 10rpx;
				}
			}
		}

		.add_address {
			width: 710rpx;
			height: 68rpx;
			background: #FF594D;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			line-height: 68rpx;
			color: #FFFFFF;
			text-align: center;
			margin-right: 20rpx;
			margin-top: 100rpx;
			// position: fixed;
			// bottom: 90rpx;
			// left: 75rpx;
		}
	}
</style>